/*
 * @Author: sunday
 * @Date: 2020-06-15 09:03:56
 * @LastEditors: sunday
 * @LastEditTime: 2020-07-21 15:46:08
 * @Description: file content
 */
var chart_word = function (pdata) {
    var chart = echarts.init(document.getElementById('chart_word'));
    var name_arr = ['优质教育', '强农惠农', '环境治理', '便捷交通', '小区改造', '最多跑一次', '城市建设', '通讯服务', '基层减负', '舒心就医'];
    var value_data = S_mock.array(name_arr.length, 7, 10);
    var seri_data = name_arr.map((x, i) => ({
        name: x,
        value: value_data[i],
        // textStyle: {
        //     color: '#fff'
        // }
    }));
    var option = {
        tooltip: {},
        series: [{
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [14, 20],
            rotationRange: [-90, 90],
            shape: 'circle',
            // shape: 'pentagon',
            left: 'center',
            top: 'center',
            width: '90%',
            height: '90%',
            drawOutOfBound: true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            240,
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 2,
                    shadowColor: '#ccc'
                }
            },
            data: seri_data
        }]
    };

    chart.setOption(option);

    window.onresize = chart.resize;
}

//气泡图
var chart_circle = function (pydata) {
    var myChart = echarts.init(document.getElementById('chart_circle'));
    var color = ['#34718E', "#244F8D", '#21447D', '#265392', '#367591', "#285798", '#98946F', '#3D889F', '#244F8D', "#244F8D"]
    var data = pydata || [{
            name: '不忘初心',
            value: '8',
            symbolSize: '0'
        },
        {
            name: '精神文明',
            value: '54',
            symbolSize: '600'

        }, {
            name: '营商环境',
            value: '40',
            symbolSize: '70'
        }, {
            name: '教育',
            value: '32',
            symbolSize: '50'
        }, {
            name: '创优',
            value: '36',
            symbolSize: '70'
        }, {
            name: '深化改革',
            value: '110',
            symbolSize: '70'
        }, {
            name: '创新',
            value: '45',
            symbolSize: '70'
        }, {
            name: '部署',
            value: '76',
            symbolSize: '70'
        },
        {
            name: '推进',
            value: '17',
            symbolSize: '70'
        }
    ];
    var item = [];
    for (var i = 0; i < data.length; i++) {
        // var col = '#'+Math.floor(Math.random()*0xffffff).toString(16);
        var col = color[i];
        var name = data[i].name;
        var value = data[i].value;
        var size = data[i].symbolSize;

        var name1;
        var name2;


        if (name.length >= 7) {
            name = name.replace(name.substring(7), '...');
        }
        //判断名称长度
        if (name.length >= 3) {
            name1 = name.substring(0, 3)
            name2 = name.substring(3)
        }
        if (data[i].value >= 100) {
            size = 100;
        } else if (data[i].value < 60) {
            size = 60
        }
        item.push({
            "name": name,
            "value": value,
            "symbolSize": size,
            "draggable": false,
            "itemStyle": {
                normal: {
                    shadowBlur: 10,
                    color: col,
                    shadowColor: col,

                }
            },
            'label': {
                align: 'center',
                formatter: '{a|' + value + '}\n{d|' + name1 + '}\n{e|' + name2 + '}',
                rich: {
                    a: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 15,
                        lineHeight: 10
                    },
                    c: {
                        backgroundColor: '#fff',
                        height: 1,
                        width: 40,
                        align: 'center',
                        lineHeight: 10
                    },
                    d: {
                        align: 'center',
                        color: '#fff',
                        lineHeight: 15
                    },
                    e: {
                        align: 'center',
                        color: '#fff',
                        lineHeight: 15
                    }
                }
            }
        })
    }

    var option = {
        tooltip: {
            show: true,
            formatter: function (para) {

                console.log(para.dataIndex)
                var i = para.dataIndex
                return data[i].name

            }


        },
        animationDurationUpdate: function (idx) {
            // 越往后的数据延迟越大
            return idx * 100;
        },
        animationEasingUpdate: 'bounceIn',

        series: [{
            type: 'graph',
            layout: 'force',
            // symbolSize:70,
            force: {
                repulsion: 110,
                edgeLength: [10, 50]
            },
            roam: true,
            label: {
                normal: {
                    show: true,
                    // formatter:function(para){
                    //     return para.value+'\n'+para.name
                    // },
                    // fontSize:12,
                    // color:'#2ba5dd',

                }
            },
            data: item
        }]
    }
    myChart.setOption(option)
}

//文字图表
var chart_text = function (dom) {
    var myChart = echarts.init(document.getElementById('chart_text'));
    var colorList = [
        [
            '#f7cf91', "#bdc4ff", '#70f0ff', '#bdc4ff', '#acf4ff', "#acf4ff", '#f7cf91', '#2dc7c8', '#a6c3ff', "#1087ea", "#a1cfff", "#e9b3b6", "#8ae19f", "#a8ca5e", "#bbc2f3"
        ]
    ];
    var numArr = ['19', '16', '10', '70', '9', '19', '20', '26', '17', '18', '21', '14', '10', '9', '10'];
    var text_arr = ['决定', '命令', '公报', '公告', '请示', '通告', '意见', '决议', '报告', '议案'];
    var seri_data = [];
    for (var key in text_arr) {
        seri_data.push({
            name: text_arr[key],
            value: numArr[key],
            symbolSize: 49,
            draggable: false, //是否拖拽 
            itemStyle: {
                normal: {
                    shadowBlur: 0,
                    shadowColor: 'transparent',
                    color: 'transparent'
                }
            },
            label: {
                show: true,
                rotate: 170,
                color: colorList[0][key],
                fontSize: 22
            }
        })
    }
    var option = {
        animationDurationUpdate: function (idx) { //数据更新动画的延迟，支持回调函数
            // 越往后的数据延迟越大
            return idx * 1000;
        },
        animationEasingUpdate: 'bounceIn', //数据更新动画的缓动效果。
        series: [{
            type: 'graph', //关系图
            layout: 'force', //图的布局。

            force: { //力引导布局相关的配置项
                repulsion: 100, //值越大斥力越大
                edgeLength: [10, 50], //值越小长度越长
            },
            roam: false, //是否开启鼠标缩放和平移漫游
            label: {
                formatter: function (para) {
                    return para.name + para.value
                }
            },
            data: seri_data
        }]
    }
    myChart.setOption(option)
}

//文字图表
var chart_text2 = function (dom) {
    var myChart = echarts.init(document.getElementById('chart_text2'));
    var colorList = [
        [
            '#f7cf91', "#bdc4ff", '#70f0ff', '#bdc4ff', '#acf4ff', "#acf4ff", '#f7cf91', '#2dc7c8', '#a6c3ff', "#1087ea", "#a1cfff", "#e9b3b6", "#8ae19f", "#a8ca5e", "#bbc2f3"
        ]
    ];
    var numArr = ['19', '16', '10', '70', '9', '19', '20', '26', '17', '18', '21', '14', '10', '9', '10'];
    var text_arr = ['决定', '命令', '公报', '公告', '请示', '通告', '意见', '决议', '报告', '议案'];
    var seri_data = [];
    for (var key in text_arr) {
        seri_data.push({
            name: text_arr[key],
            value: numArr[key],
            symbolSize: 49,
            draggable: false, //是否拖拽 
            itemStyle: {
                normal: {
                    shadowBlur: 0,
                    shadowColor: 'transparent',
                    color: 'transparent'
                }
            },
            label: {
                show: true,
                rotate: 170,
                color: '#fff',
                backgroundColor:colorList[0][key],
                padding:[4,20,4,20],
                borderRadius:10,
                // color: colorList[0][key],
                fontSize: 22
            }
        })
    }
    var option = {
        animationDurationUpdate: function (idx) { //数据更新动画的延迟，支持回调函数
            // 越往后的数据延迟越大
            return idx * 1000;
        },
        animationEasingUpdate: 'bounceIn', //数据更新动画的缓动效果。
        series: [{
            type: 'graph', //关系图
            layout: 'force', //图的布局。

            force: { //力引导布局相关的配置项
                repulsion: 100, //值越大斥力越大
                edgeLength: [10, 50], //值越小长度越长
            },
            roam: false, //是否开启鼠标缩放和平移漫游
            label: {
                formatter: function (para) {
                    return para.name + para.value
                }
            },
            data: seri_data
        }]
    }
    myChart.setOption(option)
}

//其他图表-1
var chart_other_1 = function (pxdata, pydata) {
    var myChart = echarts.init(document.getElementById('other-1'));
    var name_arr = pxdata || ['男', '女'];
    var perArr = pydata || S_mock.array(2, 1000, 2000);
    var spirit_1 = 'image://./assets/img/man.png';
    var spirit_2 = 'image://./assets/img/men.png';
    var maxData = Math.max.apply(null, perArr);
    var option = {
        // title: {
        //     text: '男女比例',
        //     x: 'center',
        //     top: '8%',
        //     textStyle: {
        //         fontWeight: 'normal',
        //         fontSize: getSize(0.18),
        //         color: '#fff'
        //     }
        // },
        xAxis: {
            max: maxData,
            splitLine: {
                show: false
            },
            offset: 10,
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false
            },
        },
        yAxis: {
            data: name_arr,
            inverse: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: 18
                }
            }
        },
        grid: {
            top: '0%',
            left: '5%',
            right: '30%',
            bottom: '5%',
            containLabel: true
        },
        series: [{
                type: 'pictorialBar',
                symbolRepeat: 'fixed',
                symbolMargin: '5%',
                symbolClip: true,
                symbolSize: 20,
                symbolBoundingData: maxData, //这个属性是『指定图形界限的值』。
                data: [{
                        value: perArr[0],
                        symbol: spirit_1,
                    },
                    {
                        value: perArr[1],
                        symbol: spirit_2,
                    }
                ],
                z: 10
            },
            {
                // full data
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        opacity: 0.1
                    }
                },
                label: {
                    normal: {
                        show: true,
                        formatter: '{c}人',
                        position: 'right',
                        offset: [3, 5],
                        textStyle: {
                            color: '#fff',
                            fontSize: 18
                        }
                    }
                },
                animationDuration: 0,
                symbolRepeat: 'fixed',
                symbolMargin: '5%',
                symbolSize: 20,
                symbolBoundingData: maxData,
                data: [{
                        value: perArr[0],
                        symbol: spirit_1,
                    },
                    {
                        value: perArr[1],
                        symbol: spirit_2,
                    }
                ],
                z: 5
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
//其他图表-2
var chart_other_2 = function (pxdata, pydata) {
    var myChart = echarts.init(document.getElementById('other-2'));
    var nameArr = pxdata || ['办理', '办结', '退回']
    var item_data = pydata || S_mock.array(3, 100, 200)
    var dataArr = [];
    for (const key in item_data) {
        dataArr.push({
            name: nameArr[key],
            value: item_data[key]
        })
    }
    var seriesObjs = [];
    var r = getSize(0.8);
    var colorArr = ['#5cfea8', '#00ccff', '#fb7075'];
    var placeHolderStyle = {
        normal: {
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0.1)',
            borderWidth: getSize(0.1)
        }
    }
    for (var i = 0; i < dataArr.length; i++) {
        var seriesObj = {
            name: dataArr[i].name,
            type: 'pie',
            clockWise: true,
            center: ['30%', '55%'],
            radius: [r - 1 - i * getSize(0.2), r - i * getSize(0.2)],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: getSize(0.1),
                    borderColor: colorArr[i],
                }
            },
            hoverAnimation: false,
            data: [{
                value: dataArr[i].value / getArrSum(item_data)
            }, {
                name: 'invisible',
                value: 1 - dataArr[i].value / getArrSum(item_data),
                // value: dataArr[0].value * 4 / 3 - dataArr[i].value,
                itemStyle: placeHolderStyle
            }]
            // data: [{
            //     value: dataArr[i].value
            // }, {
            //     name: 'invisible',
            //     value: dataArr[0].value * 4 / 3 - dataArr[i].value,
            //     itemStyle: placeHolderStyle
            // }]
        }
        seriesObjs.push(seriesObj)
    }
    var option = {
        color: colorArr,
        tooltip: {
            position: 'top',
            formatter: '{a}：{d}%'
        },
        legend: {
            y: 'center',
            right: '15%',
            itemWidth: getSize(0.25),
            itemHeight: getSize(0.15),
            itemGap: getSize(0.15),
            formatter: function (para) {
                var str = para + ': ' + dataArr[nameArr.indexOf(para)].value + ' 件';
                return str;
            },
            textStyle: {
                fontSize: getSize(0.16),
                color: '#fff'
            },
            orient: 'vertical',
            icon: 'roundRect',
            data: [dataArr[0].name, dataArr[1].name, dataArr[2].name]
        },
        toolbox: {
            show: false
        },
        series: seriesObjs
    }
    myChart.setOption(option, true);
}
//其他图表-3
var chart_other_3 = function (pxdata, pydata) {
    var myChart = echarts.init(document.getElementById('other-3'));
    var name_arr = pxdata || ['数字经济', '商贸旅游', '金融服务', '文化创意', '商务服务', '体育健康', '智能制造', '建筑规划'];
    var perArr = pydata || S_mock.array(name_arr.length, 1000, 2000);
    var spirit_1 = 'image://./assets/img/icon-jinbi.png';
    // var spirit_2 = 'image://./assets/img/men.png';
    var maxData = Math.max.apply(null, perArr);
    var seri_data = [];
    for (const key in name_arr) {
        seri_data.push({
            value: perArr[key],
            symbol: spirit_1,
        })
    }
    var option = {
        // title: {
        //     text: '男女比例',
        //     x: 'center',
        //     top: '8%',
        //     textStyle: {
        //         fontWeight: 'normal',
        //         fontSize: getSize(0.18),
        //         color: '#fff'
        //     }
        // },
        xAxis: {
            max: maxData,
            splitLine: {
                show: false
            },
            offset: 10,
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false
            },
        },
        yAxis: {
            data: name_arr,
            inverse: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#00BAFF'
                }
            },
            axisLabel: {
                // margin: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: getSize(0.24)
                }
            }
        },
        grid: {
            top: '0%',
            left: '5%',
            right: '20%',
            bottom: '5%',
            containLabel: true
        },
        series: [{
                type: 'pictorialBar',
                symbolRepeat: 'fixed',
                symbolMargin: '8%',
                symbolClip: true,
                symbolSize: getSize(0.3),
                symbolBoundingData: maxData, //这个属性是『指定图形界限的值』。
                data: seri_data,
                z: 10
            },
            {
                // full data 透明区域
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        opacity: 0
                    }
                },
                label: {
                    normal: {
                        show: true,
                        formatter: '{c} 万元',
                        position: 'right',
                        offset: [3, 5],
                        textStyle: {
                            color: '#FACC14',
                            fontSize: getSize(0.24)
                        }
                    }
                },
                animationDuration: 0,
                symbolRepeat: 'fixed',
                symbolMargin: '8%',
                symbolSize: getSize(0.3),
                symbolBoundingData: maxData,
                data: seri_data,
                z: 5
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
//其他图表-4
var chart_other_4 = function (pdata,punit) {
    var myChart = echarts.init(document.getElementById('other-4'));
    let dashedPic = '';
    let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
    var dw=punit||'元';
    let chartData = pdata||[{
            name: "本科及以上",
            value: 13211
        },
        {
            name: "高中",
            value: 42111
        },
        {
            name: "初中及以下",
            value: 81711
        },
        {
            name: "其他",
            value: 121711
        }
    ];
    let arrName = [];
    let arrValue = [];
    let sum = 0;
    let pieSeries = [],
        lineYAxis = [];

    // 数据处理
    chartData.forEach((v, i) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
    })

    // 图表option整理
    chartData.forEach((v, i) => {
        pieSeries.push({
            name: '学历',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["30%", "50%"],
            label: {
                show: false
            },
            data: [{
                value: v.value,
                name: v.name
            }, {
                value: sum - v.value,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)"
                }
            }]
        });
        pieSeries.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["30%", "50%"],
            label: {
                show: false
            },
            data: [{
                value: 7.5,
                itemStyle: {
                    color: "#E3F0FF"
                }
            }, {
                value: 2.5,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)"
                }
            }]
        });
        v.percent = (v.value / sum * 100).toFixed(1) + "%";
        lineYAxis.push({
            value: i,
            textStyle: {
                rich: {
                    circle: {
                        color: color[i],
                        padding: [0, 5]
                    }
                }
            }
        });
    })
    var option = {
        backgroundColor: '#fff',
        color: color,
        //数量改变时 修改grid的参数实现对齐
        grid: {
            top: '15%',
            bottom: '54%',
            left: "30%",
            containLabel: false
        },
        yAxis: [{
            type: 'category',
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: function (params) {
                    let item = chartData[params];
                    console.log(item)
                    return '{line|}{circle|●}{name|' + item.name + '}{bd||}{percent|' + item.percent + '}{value|' + item.value + '}{unit|'+dw+'}'
                },
                interval: 0,
                inside: true,
                textStyle: {
                    color: "#333",
                    fontSize: 14,
                    rich: {
                        line: {
                            width: 110,
                            height: 10,
                            backgroundColor: {
                                image: dashedPic
                            }
                        },
                        name: {
                            color: '#666',
                            fontSize: 14,
                        },
                        bd: {
                            color: '#ccc',
                            padding: [0, 5],
                            fontSize: 14,
                        },
                        percent: {
                            color: '#333',
                            fontSize: 14,
                        },
                        value: {
                            color: '#333',
                            fontSize: 16,
                            fontWeight: 500,
                            padding: [0, 0, 0, 20]
                        },
                        unit: {
                            fontSize: 14
                        }
                    }
                },
                show: true
            },
            data: lineYAxis
        }],
        xAxis: [{
            show: false
        }],
        series: pieSeries
    };
    myChart.setOption(option);
}